<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes you {
            0%{
            background-position: 0 0;
            }
            100%{
                background-position: 0 -960px;
            }
        }
        @keyframes move{
            0%{
                transform:    rotateX(30deg)  rotateY(0deg)  translateZ(400px)  ;
            }
            /* 20%{
                transform: rotateX(30deg)  rotateY(120deg)  translateZ(400px);
            }
            40%{
                transform:rotateX(30deg)  rotateY(180deg)  translateZ(400px);
            }
            60%{
                transform: rotateX(30deg)  rotateY(240deg)  translateZ(400px);
            }
            80%{
                transform: rotateX(30deg)  rotateY(300deg)  translateZ(400px) ;
            } */
            100%{
                transform: rotateX(30deg)  rotateY(360deg)  translateZ(400px) ;
            }
        }
        body{
            background-color: black;
        }
        .bg{
            width: 300px;
            height: 120px;
            background-image: url(./fish.png);
            animation: you 2s steps(8) infinite;     
        }
        
        /* .zhuan{
            perspective: 400;
            position: relative;
            width: 840px;
            height: 540px;
            left: 300px;
            top: 300px;
            transform: rotateX(30deg);
            transform-style: preserve-3d;
            transform: translateZ(200px) rotateX(30deg) rotateY(60deg) ;
            border: 2px solid red; 
            animation: move 2s steps(5);
            transform: rotateX(30deg);
             animation: move 10s linear ;
        } */
        /* .a1{
            transform: translate(300px,50px) translateZ(200px) rotateZ(30deg) ;
            animation: move 2s steps(6)infinite;
        }
        .a2{
            transform: translate(300px,250px) translateZ(200px) rotateZ(160deg);
            animation: move 2s steps(6) infinite;
        }
        
        .a3{
            transform: translate(0,300px) translateZ(200px) rotatez(180deg) ;
            animation: move 2s steps(6) infinite;
        }
        .a4{
            transform: translate(-300px,250px) translateZ(200px) rotatez(210deg) ;
            animation: move 2s steps(6) infinite;
        }
        .a5{
            transform: translate(-300px,50px) translateZ(200px) rotatez(340deg) ;
            animation: move 2s steps(6) infinite;
        } */
        .a1{
            transform:    rotateX(30deg)  rotateY(60deg)  translateZ(400px) ;
            animation: move 6s linear 3;
        }
        .a2{
            transform: rotateX(30deg)  rotateY(120deg)  translateZ(400px);
            animation: move 6s 1s linear 3;
        }
        
        .a3{
            transform: rotateX(30deg)  rotateY(180deg)  translateZ(400px);
            animation: move 6s 2s linear 3;
        }
        .a4{
            transform: rotateX(30deg)  rotateY(240deg)  translateZ(400px);
            animation: move 6s 3s linear 3;
        }
        .a5{
            transform: rotateX(30deg)  rotateY(300deg)  translateZ(400px);
            animation: move 6s 4s linear 3 ;
        }
        .a6{
            transform: rotateX(30deg)  rotateY(360deg)  translateZ(400px);
            animation: move 6s 5s linear 3;
        }
        .move{
            position: absolute;
            /* animation: move 3s  steps(3); */
            transform-style: preserve-3d;
            /* animation: move 4s linear infinite; */
            /* transform: rotateX(30deg) ; */
            left: 300px;
            top: 300px;
        }
        
    </style>
</head>
<body>
    <div class="zhuan">
        <div class="move a1">
            <div class="bg">
            </div>
        </div>
        <div class="move a2">
            <div class="bg">
            </div>
        </div>
        <div class="move a3">
            <div class="bg">
            </div>
        </div>
        <div class="move a4">
            <div class="bg">
            </div>
        </div>
        <div class="move a5">
            <div class="bg">
            </div>
        </div>
        <div class="move a6">
            <div class="bg">
            </div>
        </div>
    </div>    
</body>
</html>